<template>
    <el-dialog
        class="dialog"
        title="解约"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="租约编号:" prop="lease_no">
                <el-input v-model="formData.lease_no" readonly></el-input>
            </el-form-item>
            <el-form-item label="租约有效期:" prop="lease_date">
                <el-date-picker
                    v-model="formData.lease_date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmitBefore"
                >确 定</el-button
            >
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { mixinNext } from "@/mixin/Next";
import { cloneDeep, unset } from "lodash";
@Component({
    name: "RentContractRenewal",
    mixins: [mixinDialogForm, mixinNext]
})
export default class RentContractRenewal extends Vue {
    @Action("rentContract/renewal") itemEdit: any;
    init(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }
    typeData: any = [
        {
            label: "退款",
            value: "1"
        },
        {
            label: "补收",
            value: "2"
        }
    ];
    formData: any = {
        lease_sn: "",
        lease_date: ""
    };
    // 表单验证
    rules: any = {
        lease_date: [
            {
                required: true,
                message: "请选择租约有效期"
            }
        ]
    };

    onSubmitBefore() {
        const me = this as any,
            form = me.$refs.form;
        form.validate((valid: any) => {
            if (valid) {
                const values = cloneDeep(me.formData),
                    time = values.lease_date;
                values.lease_start_date = time[0];
                values.lease_end_date = time[1];
                unset(values, "lease_date");
                me.onSubmitByData(values)
            }
        });
    }
}
</script>